<!DOCTYPE html>
<p>There should be a blue square below.</p>
<div id="multicol" data-expected-height="72" style="position:relative; columns:5; column-gap:10px; width:240px; line-height:20px;">
    <div style="height:160px;">
        <div style="height:161px;"></div>
        <!-- The spanner starts after 161px of column content. -->
        <div data-offset-y="32" style="column-span:all; width:40px; height:20px; background:blue;"></div>
        <!-- The second column row starts here, after 161px of column
             content (the spanner doesn't count as column content). -->
    </div>
    <!-- The following block starts after 160px of column content. It's
         logically after the spanner, but since offset 160px belongs to the
         first column row, we'll first attempt to place it there. In this case
         it's not going to fit there, since there's only 1px of space left, and
         we have a 20px tall line to fit, so it should be pushed to the next
         row. -->
    <div data-offset-y="52" data-expected-height="20" style="background:blue;"><br></div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/check-layout-th.js"></script>
<script>
    checkLayout("#multicol");
</script>
